<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>云浮汽车站网上售票系统</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"
          rel="stylesheet">
    <link href="__PUBLIC__/Css/my.css" rel="stylesheet">

    <script src="__PUBLIC__/Js/my.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container" style="margin-bottom: 50px">
    <!-- 轮播图row -->
    <div class="row" style="margin-bottom: 10px;height: 200px;overflow: hidden">
        <div class="col-xs-12 col-md-12 col-lg-12 col-sm-12" style="overflow: hidden;padding: 0px;">
            <div id="myCarousel" class="carousel slide">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <foreach name="image" item="img">
                        <if condition="$img.id eq 1">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <else/>
                            <li data-target="#myCarousel" data-slide-to="{$img.id}"></li>
                        </if>
                    </foreach>

                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <foreach name="image" item="img">
                        <if condition="$img.id eq 1">
                            <div class="item active" onclick="onClick('img')">
                                <img src="{$img.image_path}" alt="云浮汽车站图片" class="carousel-img">
                            </div>
                            <else/>
                            <div class="item" onclick="onClick('img')">
                                <img src="{$img.image_path}" alt="云浮汽车站图片" class="carousel-img">
                            </div>
                        </if>
                    </foreach>

                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="carousel-control left" href="#myCarousel"
                   data-slide="prev">&lsaquo;</a> <a class="carousel-control right"
                                                     href="#myCarousel" data-slide="next">&rsaquo;</a>
            </div>
        </div>
    </div>

    <!--center menu group - row1-->
    <div class="row" id="center-menu-group">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 center-menu-item" align="center"
             onclick="onCenterMenuClick('/index.php?m=Home&c=Search&a=search')">
            <img alt="查询与购票" src="__PUBLIC__/images/buy.png"><br> 查询与购票
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 center-menu-item" align="center"
             onclick="onCenterMenuClick('/index.php?m=Home&c=Schedule&a=search')">
            <img alt="班次状态" src="__PUBLIC__/images/bus.png"><br> 班次状态
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 center-menu-item" align="center"
             onclick="onCenterMenuClick('/index.php?m=Home&c=Info&a=index')">
            <img alt="车站介绍" src="__PUBLIC__/images/info.png"><br> 车站介绍
        </div>
    </div>
    <!--center menu group - row2-->
    <div class="row" style="margin-bottom: 10px">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 center-menu-item" align="center"
             onclick="onCenterMenuClick('/index.php?m=Home&c=News&a=news&typeId=6')">
            <img alt="优惠促销" src="__PUBLIC__/images/discount.png"><br> 优惠促销
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 center-menu-item" align="center"
             onclick="onCenterMenuClick('/index.php?m=Home&c=Delivery&a=search')">
            <img alt="快递查询" src="__PUBLIC__/images/delivery.png"><br> 快递查询
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 center-menu-item" align="center"
             onclick="onCenterMenuClick('/index.php?m=Home&c=Account&a=index')">
            <img alt="我的帐号" src="__PUBLIC__/images/account.png"><br> 我的帐号
        </div>
    </div>

    <!-- latest news -->
    <div class="row latest-news" align="left">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 " style="padding: 0px;">
            <h5 align="left" style="background: #3399ff;padding-top: 5px;padding-bottom: 5px;"><img
                    src="__PUBLIC__/images/news.png" style="padding-left: 10px;"><span class="imp">最新消息</span></h5>
            <ul class="list-group">
                <!--discount news foreach goes here-->
                <foreach name="news" item="item">
                    <li class="list-group-item" align="left" onclick="onNewsClick('{$item.id}')"
                        style="border: none;border-bottom: solid gray 1px;margin-bottom: 3px;">
                        <div class="row  news-item" style="padding:0px 3px 0px 3px;">
                            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 news-img" align="center">
                                <img src="{$item.homepage}" style="max-width: 100%;max-height: 100%;">
                            </div>
                            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 news-body">
                                <div class="news-title">{$item.title}</div>
                                <div class="news-time">{$item.publishertime}</div>
                                <div class="news-content">
                                    {$item.intro}
                                </div>
                            </div>
                        </div>
                    </li>
                </foreach>
            </ul>
        </div>
    </div>

    <!-- bottom menu group row -->
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <nav class="navbar navbar-default navbar-fixed-bottom clearfix">
                <div class="container" id="bottom-bar" style="background-color: #D9D9D9">
                    <div class="row" id="menu-row">
                        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 bottom-row" align="center" id="menu-container1"
                             style="position:relative">
                            <div class="bn-bottom" align="center" id="bn1" onclick="onMainMenuItemClick('bn1')">
                                {$menu.0.button}
                            </div>
                            <div class="popup-menu" id="menu-content1" style="position:absolute;">
                                <ul class="list-group idx-list-group" id="container1">
                                    <foreach name="menu.0.sub_buttons" item="sub_button">
                                        <li class="list-group-item menu-item" align="left" id="{$sub_button.id}"
                                            onclick="jumpTo('{$sub_button.url}')">
                                            {$sub_button.sub_button}
                                        </li>
                                    </foreach>
                                </ul>
                            </div>
                        </div>
                        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 bottom-row" align="center" id="menu-container2"
                             style="position:relative">
                            <div class="bn-bottom" align="center" id="bn2" onclick="onMainMenuItemClick('bn2')">
                                {$menu.1.button}
                            </div>
                            <div class="popup-menu" id="menu-content2" style="position:absolute;">
                                <ul class="list-group idx-list-group" id="container2">
                                    <foreach name="menu.1.sub_buttons" item="sub_button">
                                        <li class="list-group-item menu-item" align="left" id="{$sub_button.id}"
                                            onclick="jumpTo('{$sub_button.url}')">
                                            {$sub_button.sub_button}
                                        </li>
                                    </foreach>
                                </ul>
                            </div>
                        </div>
                        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 bottom-row" align="center" id="menu-container3"
                             style="position:relative">
                            <div class="bn-bottom" align="center" id="bn3" onclick="onMainMenuItemClick('bn3')"
                                 style="border-right: none">
                                {$menu.2.button}
                            </div>
                            <div class="popup-menu" id="menu-content3" style="position:absolute;">
                                <ul class="list-group" id="container3">
                                    <foreach name="menu.2.sub_buttons" item="sub_button">
                                        <li class="list-group-item menu-item" align="left" id="{$sub_button.id}"
                                            onclick="jumpTo('{$sub_button.url}')">
                                            {$sub_button.sub_button}
                                        </li>
                                    </foreach>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </div>

</div>

<script>

    $(document).ready(function () {
        //轮播设置
        $("#myCarousel").carousel({
            interval: 3000
        });
        $("#myCarousel").carousel('cycle');

        //定位菜单
        var contentHeight;
        //定位menu-content1
        contentHeight = $('#menu-content1').css('height');
        contentHeight = parseInt(contentHeight.substring(0, contentHeight.indexOf("px", 0)));
        $("#menu-content1").css("top", -contentHeight + 20 + 'px');
        //定位menu-content2
        contentHeight = $('#menu-content2').css('height');
        contentHeight = parseInt(contentHeight.substring(0, contentHeight.indexOf("px", 0)));
        $("#menu-content2").css("top", -contentHeight + 20 + 'px');
        //定位menu-content3
        contentHeight = $('#menu-content3').css('height');
        contentHeight = parseInt(contentHeight.substring(0, contentHeight.indexOf("px", 0)));
        $("#menu-content3").css("top", -contentHeight + 20 + 'px');
        var x = $("#menu-content3").css('width');
        var y = $("#bn3").css('width');
        x = parseInt(x.substring(0, x.indexOf("px", 0)));
        y = parseInt(y.substring(0, y.indexOf("px", 0)));
        if (x > y) {
            $("#menu-content3").css("left", y - x + "px");
        }
    });
    //处理视图中点击和滚动时隐藏二级菜单
    $(document).bind({
        'click scroll': function () {
            var e = e || window.event;
            var elem = e.target || e.srcElement;
            while (elem) {
                if (elem.id == 'bn1' || elem.id == 'bn2' || elem.id == 'bn3') {
                    return;
                }
                elem = elem.parentNode;
            }
            if ($('#menu-content1').is(':visible')) {
                $('#menu-content1').hide();
                $('#bn1').css('background-color', '#F9F9F9');
            }
            if ($('#menu-content2').is(':visible')) {
                $('#menu-content2').hide();
                $('#bn2').css('background-color', '#F9F9F9');
            }
            if ($('#menu-content3').is(':visible')) {
                $('#menu-content3').hide();
                $('#bn3').css('background-color', '#F9F9F9');
            }
        }
    });
    //中间菜单点击
    function onCenterMenuClick(url) {
        if (isMenuShowing()) {
            return;
        }
        jumpTo(url);
    }
    //底部一级菜单点击处理
    function onMainMenuItemClick(which) {
        switch (which) {
            case 'bn1'://底部菜单1
                $('#menu-content2').hide();
                $('#menu-content3').hide();
                if ($('#menu-content1').is(':hidden')) {
                    $('#menu-content1').show();
                    $('#bn1').css('background-color', '#D9D9D9');
                    $('#bn2').css('background-color', '#F9F9F9');
                    $('#bn3').css('background-color', '#F9F9F9');
                } else {
                    $('#menu-content1').hide();
                    $('#bn1').css('background-color', '#F9F9F9');
                }

                break;
            case 'bn2'://底部菜单2
                $('#menu-content1').hide();
                $('#menu-content3').hide();
                if ($('#menu-content2').is(':hidden')) {
                    $('#menu-content2').show();
                    $('#bn2').css('background-color', '#D9D9D9');
                    $('#bn1').css('background-color', '#F9F9F9');
                    $('#bn3').css('background-color', '#F9F9F9');
                } else {
                    $('#menu-content2').hide();
                    $('#bn2').css('background-color', '#F9F9F9');
                }
                break;
            case 'bn3'://底部菜单3
                $('#menu-content1').hide();
                $('#menu-content2').hide();
                $('#bn1').css('background-color', 'F9F9F9');
                $('#bn2').css('background-color', 'F9F9F9');
                if ($('#menu-content3').is(':hidden')) {
                    $('#menu-content3').show();
                    $('#bn3').css('background-color', '#D9D9D9');
                    $('#bn1').css('background-color', '#F9F9F9');
                    $('#bn2').css('background-color', '#F9F9F9');
                } else {
                    $('#menu-content3').hide();
                    $('#bn3').css('background-color', '#F9F9F9');
                }
                break;
        }
    }
    //判断底部是否有二级菜单显示
    function isMenuShowing() {
        if ($("#menu-content1").is(":visible") || $("#menu-content2").is(":visible") || $("#menu-content3").is(":visible")) {
            return true;
        }
        return false;
    }
    //新闻item点击
    function onNewsClick(newsId) {
        if (isMenuShowing()) {
            return;
        }
        jumpTo("{:U('News/detail')}&newsId=" + newsId);
    }
</script>
</body>
</html>